
                <!DOCTYPE html>
                <html lang="zh">
                <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>目标详情与编辑</title>
                  <style>
                    *,
                    *::before,
                    *::after {
                      box-sizing: border-box;
                      margin: 0;
                    }
                    .iframe-outer {
                      position: fixed;
                      top: 0;
                      left: 0;
                      bottom: 0;
                      right: 0;
                      display: flex;
                      justify-content: center;
                      background-color: #E0E0E0;
                    }
                    .iframe-wrapper {
                      width: 100%;
                      height: 100%;
                      margin: 0 auto;
                      transform-origin: center top;
                      flex-shrink: 0;
                    }
                    #dynamicIframe {
                      border: none;
                      width: 100%;
                      height: 100%;
                    }
                  </style>
                  <script>
                const width = 402
                const height = 874
                const resolutionRatio = width && height ? width / height : 1
                const pageNameMap = {
                  'splash_screen': '启动页',
    'onboarding_screen': '引导页',
    'login_screen': '登录页',
    'registration_screen': '注册页',
    'forgot_password_screen': '忘记密码页',
    'dashboard_screen': '仪表盘',
    'goal_list_screen': '目标列表',
    'create_goal_type_selection_screen': '选择目标类型',
    'create_learning_goal_screen': '创建学习目标',
    'create_life_goal_screen': '创建生活目标',
    'view_edit_goal_details_screen': '目标详情与编辑',
    'share_goal_screen': '分享目标',
    'create_plan_screen': '创建计划',
    'plan_list_screen': '计划列表',
    'edit_plan_screen': '编辑计划',
    'task_detail_screen': '任务详情',
    'task_checkin_screen': '任务打卡提交',
    'add_learning_score_screen': '添加学习成绩',
    'learning_goal_progress_screen': '学习目标进展',
    'add_life_record_screen': '添加生活记录',
    'life_goal_progress_screen': '生活目标进展',
    'goal_completion_review_screen': '目标完成情况审核',
    'wishing_pool_screen': '许愿池',
    'ai_chat_screen': '大模型对话',
    'wrong_question_archive_list_screen': '错题归档列表',
    'add_wrong_question_screen': '添加错题',
    'wrong_question_detail_screen': '错题详情',
    'ability_improvement_practice_screen': '能力提升练习',
    'english_reading_list_screen': '英语阅读列表',
    'english_reading_detail_screen': '英语阅读详情',
    'settings_screen': '设置',
    'profile_management_screen': '个人资料管理',
    'change_password_screen': '修改密码',
    'focus_reminder_settings_screen': '专注力提醒设置',
    'feedback_support_screen': '反馈与支持',
    'about_app_screen': '关于应用'
                }
                function setIframeSize(w, h) {
                  const currentContainerRadio = w / h
                  let widthValue = w
                  let heightValue = h
                  let zoom = 1
                  if (currentContainerRadio > resolutionRatio) {
                    widthValue = h * resolutionRatio
                    heightValue = h
                  } else {
                    widthValue = w
                    heightValue = w / resolutionRatio
                  }
                  zoom = width ? widthValue / width : 1
                  return {
                    width: widthValue / zoom + 'px',
                    height: heightValue / zoom + 'px',
                    zoom,
                  }
                }
                function adjustIframeSize() {
                  const iframeWrapper = document.querySelector(".iframe-wrapper")
                  const { width, height, zoom } = setIframeSize(window.innerWidth, window.innerHeight)
                  iframeWrapper.style.height = height
                  iframeWrapper.style.width = width
                  iframeWrapper.style.transform = 'scale(' + zoom + ')'
                }
                function sanitizeFilename(name) {
                  return name.replace(/[\/:*?"<>|]/g, '_')
                }
                function handlePostMessage(event) {
                  if (!event.data) {
                    return
                  }
                  const { type, targetPageId } = event.data
                  const targetPageName = pageNameMap[targetPageId]
                  if (type === "iframeNavigation" && targetPageId && targetPageName) {
                    window.location.href = targetPageName + '.html'
                  }
                }
                window.addEventListener('message', handlePostMessage)
                window.onload = adjustIframeSize
                window.onresize = adjustIframeSize
                window.onunload = () => {
                  window.removeEventListener('message', handlePostMessage)
                }
              </script>
                </head>
                <body>
                  <div class="iframe-outer">
                    <div class="iframe-wrapper">
                      <iframe id="dynamicIframe" srcdoc='<html lang="zh-CN" data-theme="light"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标详情与编辑</title>
    <link href="./assets/static/uxbot/daisyui@5.css" rel="stylesheet" type="text/css">
    <script src="./assets/static/uxbot/tailwind-browser@4.js"></script>
    <link href="./assets/static/uxbot/daisyui-themes.css" rel="stylesheet" type="text/css">
    <script src="./assets/3/3.1.1/iconify.min.js"></script>
    <style>
/* daisyUI Theme Variables Customization
 * Based on minimalist educational app design with Apple-like aesthetics
 */
:root {
    /* Educational Brand Colors - Soft and Calming */
    --color-primary: rgba(59, 130, 246, 1); /* Soft blue for learning */
    --color-primary-content: rgba(255, 255, 255, 1);
    --color-secondary: rgba(34, 197, 94, 1); /* Growth green */
    --color-secondary-content: rgba(255, 255, 255, 1);
    --color-accent: rgba(251, 146, 60, 1); /* Motivational orange */
    --color-accent-content: rgba(255, 255, 255, 1);
    
    /* Clean base colors for minimalist design */
    --color-base-100: rgba(255, 255, 255, 1);
    --color-base-200: rgba(248, 250, 252, 1);
    --color-base-300: rgba(226, 232, 240, 1);
    --color-base-content: rgba(51, 65, 85, 1);
    
    /* Semantic colors */
    --color-success: rgba(34, 197, 94, 1);
    --color-warning: rgba(245, 158, 11, 1);
    --color-error: rgba(239, 68, 68, 1);
    --color-info: rgba(59, 130, 246, 1);
    
    /* Border radius for soft, friendly feel */
    --radius-box: 0.75rem;
    --radius-field: 0.5rem;
    --radius-selector: 0.375rem;
    --border: 1px;
}

/* Enhanced mobile optimizations for educational app */
body {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, system-ui, sans-serif;
}

/* Safe area insets for mobile devices */
.safe-area-top {
    padding-top: max(env(safe-area-inset-top), 16px);
}

.safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
}

/* Enhanced touch targets for mobile learning */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* Focus states for accessibility */
.focus-visible:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-field);
}

/* Typography improvements for readability */
.text-hierarchy-1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.text-hierarchy-2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.text-hierarchy-3 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Generous spacing for minimalist design */
.space-y-generous > * + * {
    margin-top: 1.5rem;
}

.space-x-generous > * + * {
    margin-left: 1.5rem;
}
</style> <style>
/* Page-specific styles for goal details screen */

/* Enhanced card styling with subtle shadows */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Progress bar enhancements */
.progress {
    border-radius: var(--radius-field);
    background: var(--color-base-200);
    transition: all 0.3s ease;
}

.progress::-webkit-progress-bar {
    background: var(--color-base-200);
    border-radius: var(--radius-field);
}

.progress::-webkit-progress-value {
    border-radius: var(--radius-field);
    background: var(--color-primary);
    transition: all 0.3s ease;
}

/* Subject-specific progress colors */
.progress-secondary::-webkit-progress-value {
    background: var(--color-secondary);
}

.progress-accent::-webkit-progress-value {
    background: var(--color-accent);
}

/* Progress container hover effects */
.bg-base-50:hover .progress {
    transform: scaleY(1.2);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.bg-base-50:hover .progress-secondary {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.bg-base-50:hover .progress-accent {
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.2);
}

/* Subject progress card animations */
.bg-base-50 {
    transition: all 0.2s ease;
    cursor: pointer;
}

.bg-base-50:hover {
    background: rgba(248, 250, 252, 0.9);
    border-color: rgba(226, 232, 240, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Progress percentage styling */
.bg-base-50 .text-lg {
    transition: transform 0.2s ease;
}

.bg-base-50:hover .text-lg {
    transform: scale(1.05);
}

/* Button hover effects with micro-animations */
.btn {
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Focus glow effect for interactive elements */
.btn:focus-visible,
.card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Enhanced spacing for mobile readability */
.space-y-generous > * + * {
    margin-top: 2rem;
}

/* Statistics grid styling */
.grid-cols-3 > div {
    transition: transform 0.2s ease;
}

.grid-cols-3 > div:hover {
    transform: scale(1.05);
}

/* Action buttons area styling */
.fixed.bottom-20 {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

/* Badge styling enhancements */
.badge {
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Subject cards styling */
.bg-base-50 {
    background: rgba(248, 250, 252, 0.5);
    border: 1px solid rgba(226, 232, 240, 0.3);
    transition: all 0.2s ease;
}

.bg-base-50:hover {
    background: rgba(248, 250, 252, 0.8);
    border-color: rgba(226, 232, 240, 0.5);
    transform: translateY(-1px);
}

/* Subject icon colors */
.bg-base-50 .iconify {
    transition: transform 0.2s ease;
}

.bg-base-50:hover .iconify {
    transform: scale(1.1);
}

/* Reward/penalty text colors */
.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

/* Info cards styling */
.bg-info\/10 {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.bg-success\/10 {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.bg-warning\/10 {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Progress section chart placeholder styling */
.bg-base-200 {
    transition: background-color 0.2s ease;
}

.bg-base-200:hover {
    background: var(--color-base-300);
}

/* Mobile-specific touch improvements */
@media (max-width: 768px) {
    .touch-target {
        min-height: 48px;
        min-width: 48px;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .btn {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
}

/* Smooth transitions for all interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
}

.iconify {
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn:hover .iconify {
    transform: scale(1.1);
}

/* Status badge styling */
.badge-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
    letter-spacing: 0.025em;
}

.badge-sm .iconify {
    margin-right: 0.25rem;
}

/* Status badge animation */
.badge-primary {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }
}
</style>
  <script src="./assets/static/uxbot/25_6/holder.js"></script></head>
  <body class="bg-base-100 min-h-screen flex flex-col">
    <div data-section-id="common_header_mobile" data-section-type="common_header" class="navbar bg-base-100 shadow-sm h-16 min-h-16 px-4 safe-area-top sticky top-0 z-50">
        <div data-type="container" class="navbar-start">
            <button data-type="button" class="btn btn-ghost btn-sm touch-target back-btn hidden" onclick="handleBackNavigation()" style="display: none;">
                <span class="iconify text-base-content" data-icon="heroicons:arrow-left" data-width="24"></span>
            </button>
            <button data-type="button" class="btn btn-ghost btn-sm touch-target hamburger-btn" onclick="toggleDrawer()">
                <span class="iconify text-base-content" data-icon="heroicons:bars-3" data-width="24"></span>
            </button>
        </div>
        
        <div data-type="container" class="navbar-center">
            <span data-type="text" class="text-lg font-semibold text-base-content header-title">学习助手</span>
        </div>
        
        <div data-type="container" class="navbar-end">
            <button data-type="button" class="btn btn-ghost btn-sm touch-target right-action" style="display: none;">
                <span class="iconify text-base-content" data-icon="heroicons:ellipsis-vertical" data-width="24"></span>
            </button>
            <div data-type="container" class="avatar placeholder inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-content">
                <span class="flex items-center justify-center h-full font-semibold text-xs">学</span>
            </div>
        </div>
    </div>
    
    <style>
    [data-section-id="common_header_mobile"] {
        border-bottom: var(--border) solid var(--color-base-200);
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.95);
    }
    
    [data-section-id="common_header_mobile"] .hamburger-btn:hover,
    [data-section-id="common_header_mobile"] .back-btn:hover,
    [data-section-id="common_header_mobile"] .right-action:hover {
        background-color: var(--color-base-200);
    }
    
    [data-section-id="common_header_mobile"] .btn {
        transition: all 0.2s ease-in-out;
        border-radius: var(--radius-field);
    }
    
    [data-section-id="common_header_mobile"] .header-title {
        letter-spacing: 0.02em;
    }
    </style>
    
    <script>
    (function() {
        // Initialize header with default state
        document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
            const header = document.querySelector(&#39;[data-section-id="common_header_mobile"]&#39;);
            if (header) {
                // Default title can be updated by individual pages
                updateHeader(&#39;学习助手&#39;);
            }
        });
    })();
    </script><!-- Main Content -->
    <main class="flex-1 pb-32">
      <!-- Goal Detail Body -->
      <div id="i7wqx" class="px-4 py-6 space-y-6 i7wqx spark-custom-i7wqx">
        <!-- Goal Title and Status -->
        <div class="text-center space-y-3"></div>
        <!-- Goal Basic Info Card -->
        <div class="card bg-base-100 shadow-sm border border-base-200">
          <div id="iz4ai" class="card-body p-6 space-y-4 iz4ai spark-custom-iz4ai iz4ai">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-hierarchy-2 text-base-content">目标信息</h2>
              <div class="badge badge-primary badge-sm">
                <span class="iconify mr-1" data-icon="heroicons:play" data-width="12"></span>
                进行中
              </div>
            </div>
            <!-- Goal Type -->
            <div class="space-y-1 pb-4 border-b border-base-200">
              <span class="text-sm text-base-content/60">目标类型</span>
              <p class="text-hierarchy-3 text-base-content">学习目标</p>
            </div>
            <!-- Subject Goals List -->
            <div class="space-y-6">
              <!-- Subject 1: English -->
              <div class="bg-base-50 rounded-lg p-4 space-y-3">
                <div class="flex items-center gap-2 mb-3">
                  <span class="iconify text-primary" data-icon="heroicons:academic-cap" data-width="20"></span>
                  <h3 class="text-hierarchy-3 font-semibold text-base-content">
                    英语
                  </h3>
                </div>
                <div class="grid grid-cols-1 gap-3">
                  <div class="space-y-1">
                    <span class="text-xs text-base-content/60">设定目标</span>
                    <p class="text-sm text-base-content">
                      在2025年12月前达到雅思7分水平，提升听说读写四项技能
                    </p>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">启动日期</span>
                      <p class="text-sm text-base-content">2024年1月15日</p>
                    </div>
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">截止日期</span>
                      <p class="text-sm text-base-content">2025年12月31日</p>
                    </div>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">期望奖励</span>
                      <p class="text-sm text-success">购买心仪的耳机</p>
                    </div>
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">自设惩罚</span>
                      <p class="text-sm text-warning">一个月不买奶茶</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Subject 2: Mathematics -->
              <div class="bg-base-50 rounded-lg p-4 space-y-3">
                <div class="flex items-center gap-2 mb-3">
                  <span class="iconify text-secondary" data-icon="heroicons:calculator" data-width="20"></span>
                  <h3 class="text-hierarchy-3 font-semibold text-base-content">
                    数学
                  </h3>
                </div>
                <div class="grid grid-cols-1 gap-3">
                  <div class="space-y-1">
                    <span class="text-xs text-base-content/60">设定目标</span>
                    <p class="text-sm text-base-content">
                      完成高等数学课程，期末考试达到85分以上
                    </p>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">启动日期</span>
                      <p class="text-sm text-base-content">2024年2月1日</p>
                    </div>
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">截止日期</span>
                      <p class="text-sm text-base-content">2024年6月30日</p>
                    </div>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">期望奖励</span>
                      <p class="text-sm text-success">购买新的数学参考书</p>
                    </div>
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">自设惩罚</span>
                      <p class="text-sm text-warning">一周不玩游戏</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Subject 3: Programming -->
              <div class="bg-base-50 rounded-lg p-4 space-y-3">
                <div class="flex items-center gap-2 mb-3">
                  <span class="iconify text-accent" data-icon="heroicons:code-bracket" data-width="20"></span>
                  <h3 class="text-hierarchy-3 font-semibold text-base-content">
                    编程
                  </h3>
                </div>
                <div class="grid grid-cols-1 gap-3">
                  <div class="space-y-1">
                    <span class="text-xs text-base-content/60">设定目标</span>
                    <p class="text-sm text-base-content">
                      掌握Python编程，完成3个实际项目
                    </p>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">启动日期</span>
                      <p class="text-sm text-base-content">2024年3月1日</p>
                    </div>
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">截止日期</span>
                      <p class="text-sm text-base-content">2024年8月31日</p>
                    </div>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">期望奖励</span>
                      <p class="text-sm text-success">购买新的编程键盘</p>
                    </div>
                    <div class="space-y-1">
                      <span class="text-xs text-base-content/60">自设惩罚</span>
                      <p class="text-sm text-warning">两周不看电影</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Edit and Share Buttons -->
        <div class="flex gap-3">
          <button class="btn btn-outline btn-primary flex-1 touch-target" onclick="navigateTo(&#39;create_learning_goal_screen&#39;)">
            <span class="iconify" data-icon="heroicons:pencil" data-width="20"></span>
            编辑目标</button><button class="btn btn-outline btn-secondary flex-1 touch-target" onclick="navigateTo(&#39;share_goal_screen&#39;)">
            <span class="iconify" data-icon="heroicons:share" data-width="20"></span>
            分享目标
          </button>
        </div>
        <!-- Progress Section -->
        <div class="card bg-base-100 shadow-sm border border-base-200">
          <div id="iemiyy" class="card-body p-6 space-y-6 iemiyy spark-custom-iemiyy">
            <div class="flex items-center justify-between">
              <h2 id="iao8w3" class="text-hierarchy-2 text-base-content iao8w3 spark-custom-iao8w3">
                达成进度
              </h2>
              <span class="text-lg font-semibold text-primary">总体 60%</span>
            </div>
            <!-- Overall Progress -->
            <div class="space-y-2">
              <progress value="60" max="100" class="progress progress-primary w-full h-3"></progress>
              <div class="flex justify-between text-sm text-base-content/60">
                <span id="ivt6t6" class="ivt6t6 spark-custom-ivt6t6">总体进度</span><span id="i0lfkt" class="i0lfkt spark-custom-i0lfkt">60% 完成</span>
              </div>
            </div>
            <!-- Individual Subject Progress -->
            <div class="space-y-4">
              <h3 class="text-hierarchy-3 font-semibold text-base-content">
                各科目进度
              </h3>
              <!-- English Progress -->
              <div class="bg-base-50 rounded-lg p-4 space-y-3">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="iconify text-primary" data-icon="heroicons:academic-cap" data-width="20"></span><span class="font-medium text-base-content">英语</span>
                  </div>
                  <div class="text-right">
                    <div class="text-lg font-semibold text-primary">75%</div>
                    <div class="text-xs text-base-content/60">
                      当前分数: 6.5
                    </div>
                  </div>
                </div>
                <progress value="75" max="100" class="progress progress-primary w-full h-2"></progress>
                <div class="flex justify-between text-xs text-base-content/60">
                  <span>目标: 雅思7分</span><span>剩余: 0.5分</span>
                </div>
              </div>
              <!-- Mathematics Progress -->
              <div class="bg-base-50 rounded-lg p-4 space-y-3">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="iconify text-secondary" data-icon="heroicons:calculator" data-width="20"></span><span class="font-medium text-base-content">数学</span>
                  </div>
                  <div class="text-right">
                    <div class="text-lg font-semibold text-secondary">60%</div>
                    <div class="text-xs text-base-content/60">
                      当前分数: 78分
                    </div>
                  </div>
                </div>
                <progress value="60" max="100" class="progress progress-secondary w-full h-2"></progress>
                <div class="flex justify-between text-xs text-base-content/60">
                  <span>目标: 85分以上</span><span>剩余: 7分</span>
                </div>
              </div>
              <!-- Programming Progress -->
              <div class="bg-base-50 rounded-lg p-4 space-y-3">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="iconify text-accent" data-icon="heroicons:code-bracket" data-width="20"></span><span class="font-medium text-base-content">编程</span>
                  </div>
                  <div class="text-right">
                    <div class="text-lg font-semibold text-accent">45%</div>
                    <div class="text-xs text-base-content/60">
                      已完成: 1/3项目
                    </div>
                  </div>
                </div>
                <progress value="45" max="100" class="progress progress-accent w-full h-2"></progress>
                <div class="flex justify-between text-xs text-base-content/60">
                  <span>目标: 完成3个项目</span><span>剩余: 2个项目</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Learning Progress Section -->
        <div class="card bg-base-100 shadow-sm border border-base-200">
          <div class="card-body p-6 space-y-4">
            <div class="flex items-center justify-between">
              <h2 class="text-hierarchy-2 text-base-content">学习成绩</h2>
              <button class="btn btn-ghost btn-sm touch-target" onclick="navigateTo(&#39;learning_goal_progress_screen&#39;)">
                <span class="iconify" data-icon="heroicons:chart-bar" data-width="16"></span>
                查看详情
              </button>
            </div>
            <div class="bg-base-200 rounded-lg p-4">
              <div class="flex items-center justify-center h-24">
                <div class="text-center space-y-2">
                  <span class="iconify text-base-content/40" data-icon="heroicons:chart-bar-square" data-width="32"></span>
                  <p class="text-sm text-base-content/60">点击查看成绩曲线图</p>
                </div>
              </div>
            </div>
            <div class="grid grid-cols-3 gap-4 text-center">
              <div class="space-y-1"></div>
              <div class="space-y-1"></div>
              <div class="space-y-1"></div>
            </div>
          </div>
        </div>
        <!-- Overall Goal Summary -->
        <div class="card bg-base-100 shadow-sm border border-base-200">
          <div class="card-body p-6 space-y-4">
            <h2 class="text-hierarchy-2 text-base-content">整体目标总结</h2>
            <div class="grid grid-cols-3 gap-4 text-center">
              <div class="space-y-1">
                <p class="text-lg font-semibold text-primary">3</p>
                <p class="text-xs text-base-content/60">科目总数</p>
              </div>
              <div class="space-y-1">
                <p class="text-lg font-semibold text-success">1</p>
                <p class="text-xs text-base-content/60">已完成</p>
              </div>
              <div class="space-y-1">
                <p class="text-lg font-semibold text-warning">2</p>
                <p class="text-xs text-base-content/60">进行中</p>
              </div>
            </div>
            <div class="space-y-3 mt-4">
              <div class="flex items-center gap-3 p-3 bg-info/10 rounded-lg">
                <span class="iconify text-info" data-icon="heroicons:information-circle" data-width="20"></span>
                <div class="flex-1">
                  <p class="text-sm font-medium text-base-content">
                    目标完成提醒
                  </p>
                  <p class="text-xs text-base-content/60">
                    完成所有科目目标后可获得全部奖励
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- Action Buttons -->
    <div class="fixed bottom-20 left-0 right-0 bg-base-100 border-t border-base-200 p-4 safe-area-bottom">
      <div class="space-y-3">
        <!-- Primary Action --><button class="btn btn-primary w-full touch-target" onclick="navigateTo(&#39;create_plan_screen&#39;)">
          <span class="iconify" data-icon="heroicons:plus" data-width="20"></span>
          制定计划</button><!-- Secondary Actions -->
        <div class="grid grid-cols-2 gap-3">
          <button class="btn btn-outline btn-sm touch-target" onclick="navigateTo(&#39;plan_list_screen&#39;)">
            <span class="iconify" data-icon="heroicons:list-bullet" data-width="16"></span>
            查看所有计划</button><button class="btn btn-outline btn-sm touch-target" onclick="navigateTo(&#39;add_learning_score_screen&#39;)">
            <span class="iconify" data-icon="heroicons:plus-circle" data-width="16"></span>
            添加学习成绩
          </button>
        </div>
        <!-- Completion Action --><button class="btn btn-success btn-outline w-full touch-target" onclick="navigateTo(&#39;goal_completion_review_screen&#39;)">
          <span class="iconify" data-icon="heroicons:check-circle" data-width="20"></span>
          确认目标达成
        </button>
      </div>
    </div>
    <!-- Bottom Navigation --><div data-section-id="common_dock" data-section-type="common_footer" class="dock bg-base-100 border-t border-base-200 safe-area-bottom fixed bottom-0 left-0 right-0 z-40">
  <button data-type="button" data-item="dashboard" class="dock-item touch-target" onclick="navigateTo(&#39;dashboard_screen&#39;)">
    <span data-type="icon" class="iconify text-base-content" data-icon="heroicons:home" data-width="24"></span><span data-type="text" class="dock-item-label">首页</span></button><button data-type="button" data-item="goals" class="dock-item touch-target" onclick="navigateTo(&#39;goal_list_screen&#39;)">
    <span data-type="icon" class="iconify text-base-content" data-icon="heroicons:flag" data-width="24"></span><span data-type="text" class="dock-item-label ifalfr spark-custom-ifalfr" id="ifalfr">目标计划</span></button><button data-type="button" data-item="study" class="dock-item touch-target" onclick="navigateTo(&#39;ai_chat_screen&#39;)">
    <span data-type="icon" class="iconify text-base-content" data-icon="heroicons:academic-cap" data-width="24"></span><span data-type="text" class="dock-item-label iopg62 spark-custom-iopg62" id="iopg62">AI助手</span></button><button data-type="button" data-item="progress" class="dock-item touch-target" onclick="navigateTo(&#39;wishing_pool_screen&#39;)">
    <span data-type="icon" class="iconify text-base-content" data-icon="heroicons:gift" data-width="24"></span><span data-type="text" class="dock-item-label izm9ae spark-custom-izm9ae" id="izm9ae">许愿池</span></button><button data-type="button" data-item="more" class="dock-item touch-target" onclick="toggleDrawer()">
    <span data-type="icon" class="iconify text-base-content" data-icon="heroicons:squares-2x2" data-width="24"></span><span data-type="text" class="dock-item-label">更多</span>
  </button>
</div>
<!-- Drawer --><div data-section-id="common_drawer" data-section-type="common_section" class="drawer-side fixed top-0 left-0 h-full w-80 bg-base-100 shadow-xl z-50 transform -translate-x-full transition-transform duration-300 ease-in-out safe-area-top">
        <div data-type="container" class="flex flex-col h-full">
            <!-- Drawer Header -->
            <div data-type="container" class="flex items-center justify-between p-6 border-b border-base-200">
                <div data-type="container" class="flex items-center gap-3">
                    <div data-type="container" class="avatar placeholder inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary text-primary-content">
                        <span class="flex items-center justify-center h-full font-semibold text-base">学</span>
                    </div>
                    <div data-type="container" class="flex flex-col">
                        <span data-type="text" class="font-semibold text-base-content">学习助手</span>
                        <span data-type="text" class="text-sm text-base-content opacity-70">让学习更高效</span>
                    </div>
                </div>
                <button data-type="button" class="btn btn-ghost btn-sm touch-target" onclick="toggleDrawer()">
                    <span data-type="icon" class="iconify text-base-content" data-icon="heroicons:x-mark" data-width="24"></span>
                </button>
            </div>
            
            <!-- Drawer Menu -->
            <div data-type="container" class="flex-1 overflow-y-auto py-4">
                <div class="px-4 mb-4">
                    <h3 class="text-xs font-semibold text-base-content opacity-60 uppercase tracking-wider mb-3">学习工具</h3>
                    <ul data-type="container" class="space-y-1">
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;plan_list_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:calendar-days" data-width="20"></span>
                            <span data-type="text">学习计划</span>
                        </button></li>
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;wrong_question_archive_list_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:book-open" data-width="20"></span>
                            <span data-type="text">错题归档</span>
                        </button></li>
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;ability_improvement_practice_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:chart-bar-square" data-width="20"></span>
                            <span data-type="text">能力提升</span>
                        </button></li>
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;english_reading_list_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:language" data-width="20"></span>
                            <span data-type="text">英语阅读</span>
                        </button></li>
                    </ul>
                </div>
                
                <div class="px-4 mb-4">
                    <h3 class="text-xs font-semibold text-base-content opacity-60 uppercase tracking-wider mb-3">个人中心</h3>
                    <ul data-type="container" class="space-y-1">
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;profile_management_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:user-circle" data-width="20"></span>
                            <span data-type="text">个人资料</span>
                        </button></li>
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;focus_reminder_settings_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:bell" data-width="20"></span>
                            <span data-type="text">专注提醒</span>
                        </button></li>
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;settings_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:cog-6-tooth" data-width="20"></span>
                            <span data-type="text">应用设置</span>
                        </button></li>
                    </ul>
                </div>
                
                <div class="px-4">
                    <h3 class="text-xs font-semibold text-base-content opacity-60 uppercase tracking-wider mb-3">帮助支持</h3>
                    <ul data-type="container" class="space-y-1">
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;feedback_support_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:chat-bubble-left-ellipsis" data-width="20"></span>
                            <span data-type="text">反馈支持</span>
                        </button></li>
                        <li><button data-type="button" class="menu-item" onclick="navigateTo(&#39;about_app_screen&#39;); toggleDrawer();">
                            <span data-type="icon" class="iconify" data-icon="heroicons:information-circle" data-width="20"></span>
                            <span data-type="text">关于应用</span>
                        </button></li>
                    </ul>
                </div>
            </div>
            
            <!-- Drawer Footer -->
            <div data-type="container" class="p-4 border-t border-base-200">
                <button data-type="button" class="btn btn-outline btn-sm w-full" onclick="navigateTo(&#39;login_screen&#39;)">
                    <span data-type="icon" class="iconify" data-icon="heroicons:arrow-right-on-rectangle" data-width="16"></span>
                    <span data-type="text">退出登录</span>
                </button>
            </div>
        </div>
    </div>
    
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    
    <style>
    [data-section-id="common_drawer"].drawer-open {
        transform: translateX(0);
    }
    
    [data-section-id="common_drawer"] {
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.98);
    }
    
    [data-section-id="common_drawer"] .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--radius-field);
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        transition: all 0.2s ease-in-out;
        color: var(--color-base-content);
        font-weight: 500;
    }
    
    [data-section-id="common_drawer"] .menu-item:hover {
        background-color: var(--color-base-200);
        transform: translateX(4px);
    }
    
    [data-section-id="common_drawer"] .menu-item:active {
        background-color: var(--color-primary);
        color: var(--color-primary-content);
        transform: translateX(4px) scale(0.98);
    }
    
    [data-section-id="common_drawer"] .menu-item .iconify {
        color: var(--color-base-content);
        opacity: 0.8;
        transition: all 0.2s ease-in-out;
    }
    
    [data-section-id="common_drawer"] .menu-item:hover .iconify {
        opacity: 1;
        color: var(--color-primary);
    }
    
    [data-section-id="common_drawer"] .menu-item:active .iconify {
        color: var(--color-primary-content);
    }
    
    [data-section-id="common_drawer"] h3 {
        font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, system-ui, sans-serif;
    }
    
    .drawer-overlay {
        transition: opacity 0.3s ease-in-out;
    }
    </style>
    
    <script>
    (function() {
        // Close drawer on escape key
        document.addEventListener(&#39;keydown&#39;, function(e) {
            if (e.key === &#39;Escape&#39;) {
                const drawer = document.querySelector(&#39;[data-section-id="common_drawer"]&#39;);
                if (drawer &amp;&amp; drawer.classList.contains(&#39;drawer-open&#39;)) {
                    toggleDrawer();
                }
            }
        });
        
        // Initialize drawer state
        document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
            // Ensure drawer is hidden initially
            const drawer = document.querySelector(&#39;[data-section-id="common_drawer"]&#39;);
            const overlay = document.querySelector(&#39;.drawer-overlay&#39;);
            
            if (drawer &amp;&amp; overlay) {
                drawer.classList.remove(&#39;drawer-open&#39;);
                overlay.classList.add(&#39;hidden&#39;);
            }
        });
    })();
    </script><!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
    <!-- Drawer Overlay -->
    <div class="drawer-overlay fixed inset-0 bg-black/50 z-40 hidden"></div>
    <script>
(function() {
    // Initialize global app state
    window.APP_GLOBALS = window.APP_GLOBALS || {};
    
    // Global navigation function
    window.navigateTo = function(targetPageId) {
        const isInIframe = window.self !== window.top;
        const targetFileName = `${targetPageId}.html`;
        
        if (isInIframe) {
            window.parent.postMessage({
                type: &#39;iframeNavigation&#39;,
                targetPageId: targetPageId
            }, &#39;*&#39;);
        } else {
            window.location.href = targetFileName;
        }
    };

    // Drawer toggle function
    window.toggleDrawer = function() {
        const drawer = document.querySelector(&#39;[data-section-id="common_drawer"]&#39;);
        const overlay = document.querySelector(&#39;.drawer-overlay&#39;);
        
        if (drawer &amp;&amp; overlay) {
            const isOpen = drawer.classList.contains(&#39;drawer-open&#39;);
            
            if (isOpen) {
                drawer.classList.remove(&#39;drawer-open&#39;);
                overlay.classList.add(&#39;hidden&#39;);
                document.body.style.overflow = &#39;&#39;;
            } else {
                drawer.classList.add(&#39;drawer-open&#39;);
                overlay.classList.remove(&#39;hidden&#39;);
                document.body.style.overflow = &#39;hidden&#39;;
            }
        }
    };

    // Close drawer when clicking overlay
    document.addEventListener(&#39;click&#39;, function(e) {
        if (e.target.classList.contains(&#39;drawer-overlay&#39;)) {
            toggleDrawer();
        }
    });

    // Header update function for page customization
    window.updateHeader = function(title, showBack = false, rightAction = null) {
        const headerTitle = document.querySelector(&#39;[data-section-id="common_header_mobile"] .header-title&#39;);
        const backBtn = document.querySelector(&#39;[data-section-id="common_header_mobile"] .back-btn&#39;);
        const rightActionBtn = document.querySelector(&#39;[data-section-id="common_header_mobile"] .right-action&#39;);
        
        if (headerTitle) {
            headerTitle.textContent = title;
        }
        
        if (backBtn) {
            backBtn.style.display = showBack ? &#39;flex&#39; : &#39;none&#39;;
        }
        
        if (rightActionBtn &amp;&amp; rightAction) {
            rightActionBtn.innerHTML = rightAction.html;
            rightActionBtn.onclick = rightAction.callback;
            rightActionBtn.style.display = &#39;flex&#39;;
        } else if (rightActionBtn) {
            rightActionBtn.style.display = &#39;none&#39;;
        }
    };

    // Dock active state function
    window.setDockActive = function(activeItem) {
        const dockItems = document.querySelectorAll(&#39;[data-section-id="common_dock"] .dock-item&#39;);
        
        dockItems.forEach(item => {
            const itemName = item.getAttribute(&#39;data-item&#39;);
            
            if (itemName === activeItem) {
                item.classList.add(&#39;dock-item-active&#39;);
                const icon = item.querySelector(&#39;.iconify&#39;);
                const label = item.querySelector(&#39;.dock-item-label&#39;);
                
                if (icon) {
                    icon.style.opacity = &#39;1&#39;;
                    icon.style.color = &#39;var(--color-primary)&#39;;
                }
                if (label) {
                    label.style.color = &#39;var(--color-primary)&#39;;
                    label.style.opacity = &#39;1&#39;;
                }
            } else {
                item.classList.remove(&#39;dock-item-active&#39;);
                const icon = item.querySelector(&#39;.iconify&#39;);
                const label = item.querySelector(&#39;.dock-item-label&#39;);
                
                if (icon) {
                    icon.style.opacity = &#39;0.6&#39;;
                    icon.style.color = &#39;var(--color-base-content)&#39;;
                }
                if (label) {
                    label.style.color = &#39;var(--color-base-content)&#39;;
                    label.style.opacity = &#39;0.7&#39;;
                }
            }
        });
    };

    // Handle back navigation safely
    window.handleBackNavigation = function() {
        if (window.history.length > 1) {
            window.history.back();
        } else {
            navigateTo(&#39;dashboard_screen&#39;);
        }
    };

    // Initialize app
    document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
        // Set default theme
        document.documentElement.setAttribute(&#39;data-theme&#39;, &#39;light&#39;);
    });

})();
</script><script>
(function() {
    // Initialize page
    document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
        // Update header with page title and back button
        updateHeader(&#39;目标详情与编辑&#39;, true, {
            html: &#39;<span class="iconify" data-icon="heroicons:ellipsis-horizontal" data-width="24"></span>&#39;,
            callback: showMoreOptions
        });
        
        // Set active dock item
        setDockActive(&#39;goals&#39;);
        
        // Initialize progress animations
        initializeProgressAnimations();
        
        // Initialize micro-interactions
        initializeMicroInteractions();
    });

    // Show more options menu
    window.showMoreOptions = function() {
        // Create a simple dropdown menu for additional options
        const existingMenu = document.querySelector(&#39;.more-options-menu&#39;);
        if (existingMenu) {
            existingMenu.remove();
            return;
        }

        const menu = document.createElement(&#39;div&#39;);
        menu.className = &#39;more-options-menu absolute top-16 right-4 bg-base-100 shadow-lg rounded-lg border border-base-200 z-50 min-w-48&#39;;
        menu.innerHTML = `
            <div class="py-2">
                <button class="w-full text-left px-4 py-2 hover:bg-base-200 flex items-center gap-2" onclick="deleteGoal()">
                    <span class="iconify text-error" data-icon="heroicons:trash" data-width="16"></span>
                    删除目标
                </button>
                <button class="w-full text-left px-4 py-2 hover:bg-base-200 flex items-center gap-2" onclick="duplicateGoal()">
                    <span class="iconify" data-icon="heroicons:document-duplicate" data-width="16"></span>
                    复制目标
                </button>
                <button class="w-full text-left px-4 py-2 hover:bg-base-200 flex items-center gap-2" onclick="archiveGoal()">
                    <span class="iconify" data-icon="heroicons:archive-box" data-width="16"></span>
                    归档目标
                </button>
            </div>
        `;
        
        document.body.appendChild(menu);
        
        // Close menu when clicking outside
        setTimeout(() => {
            document.addEventListener(&#39;click&#39;, function closeMenu(e) {
                if (!menu.contains(e.target)) {
                    menu.remove();
                    document.removeEventListener(&#39;click&#39;, closeMenu);
                }
            });
        }, 100);
    };

// Initialize progress animations
    function initializeProgressAnimations() {
        const progressBars = document.querySelectorAll(&#39;.progress&#39;);
        progressBars.forEach((progressBar, index) => {
            // Add click handler for progress bar tooltip
            progressBar.addEventListener(&#39;click&#39;, function(e) {
                const value = progressBar.getAttribute(&#39;value&#39;) + &#39;%&#39;;
                showProgressTooltip(e, value);
            });
            
            // Animate progress bars on load
            setTimeout(() => {
                animateProgressBar(progressBar);
            }, index * 200);
        });
        
        // Add click handlers for subject progress cards
        const subjectCards = document.querySelectorAll(&#39;.bg-base-50&#39;);
        subjectCards.forEach(card => {
            card.addEventListener(&#39;click&#39;, function() {
                showSubjectDetails(this);
            });
        });
    }
    
    // Animate progress bar
    function animateProgressBar(progressBar) {
        const finalValue = progressBar.getAttribute(&#39;value&#39;);
        progressBar.setAttribute(&#39;value&#39;, &#39;0&#39;);
        
        let currentValue = 0;
        const increment = finalValue / 30; // 30 frames for smooth animation
        
        const animate = () => {
            currentValue += increment;
            if (currentValue >= finalValue) {
                progressBar.setAttribute(&#39;value&#39;, finalValue);
            } else {
                progressBar.setAttribute(&#39;value&#39;, Math.floor(currentValue));
                requestAnimationFrame(animate);
            }
        };
        
        requestAnimationFrame(animate);
    }
    
    // Show subject details
    function showSubjectDetails(card) {
        const subjectName = card.querySelector(&#39;.font-medium&#39;).textContent;
        const percentage = card.querySelector(&#39;.text-lg&#39;).textContent;
        const currentScore = card.querySelector(&#39;.text-xs&#39;).textContent;
        
        showToast(`${subjectName}: ${percentage} - ${currentScore}`, &#39;info&#39;);
    }

    // Show progress tooltip
    function showProgressTooltip(event, value) {
        // Remove existing tooltip
        const existingTooltip = document.querySelector(&#39;.progress-tooltip&#39;);
        if (existingTooltip) {
            existingTooltip.remove();
        }

        // Create tooltip
        const tooltip = document.createElement(&#39;div&#39;);
        tooltip.className = &#39;progress-tooltip absolute bg-base-content text-base-100 px-2 py-1 rounded text-xs z-50&#39;;
        tooltip.textContent = value;
        tooltip.style.left = event.pageX - 20 + &#39;px&#39;;
        tooltip.style.top = event.pageY - 40 + &#39;px&#39;;
        
        document.body.appendChild(tooltip);
        
        // Remove tooltip after 2 seconds
        setTimeout(() => {
            tooltip.remove();
        }, 2000);
    }

    // Initialize micro-interactions
    function initializeMicroInteractions() {
        // Add ripple effect to buttons
        const buttons = document.querySelectorAll(&#39;.btn&#39;);
        buttons.forEach(button => {
            button.addEventListener(&#39;click&#39;, function(e) {
                createRippleEffect(e, this);
            });
        });

        // Add hover effects to cards
        const cards = document.querySelectorAll(&#39;.card&#39;);
        cards.forEach(card => {
            card.addEventListener(&#39;mouseenter&#39;, function() {
                this.style.transform = &#39;translateY(-2px)&#39;;
            });
            
            card.addEventListener(&#39;mouseleave&#39;, function() {
                this.style.transform = &#39;translateY(0)&#39;;
            });
        });
    }

    // Create ripple effect
    function createRippleEffect(event, element) {
        const ripple = document.createElement(&#39;span&#39;);
        const rect = element.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = event.clientX - rect.left - size / 2;
        const y = event.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = size + &#39;px&#39;;
        ripple.style.left = x + &#39;px&#39;;
        ripple.style.top = y + &#39;px&#39;;
        ripple.className = &#39;ripple&#39;;
        
        const rippleStyle = document.createElement(&#39;style&#39;);
        rippleStyle.textContent = `
            .ripple {
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                transform: scale(0);
                animation: ripple-animation 0.6s linear;
                pointer-events: none;
            }
            @keyframes ripple-animation {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        
        if (!document.querySelector(&#39;style[data-ripple]&#39;)) {
            rippleStyle.setAttribute(&#39;data-ripple&#39;, &#39;true&#39;);
            document.head.appendChild(rippleStyle);
        }
        
        element.style.position = &#39;relative&#39;;
        element.style.overflow = &#39;hidden&#39;;
        element.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    }

    // Stub functions for menu actions
    window.deleteGoal = function() {
        if (confirm(&#39;确定要删除这个目标吗？此操作不可撤销。&#39;)) {
            // Add delete animation
            const mainContent = document.querySelector(&#39;main&#39;);
            mainContent.style.opacity = &#39;0.5&#39;;
            mainContent.style.transform = &#39;scale(0.95)&#39;;
            
            setTimeout(() => {
                navigateTo(&#39;goal_list_screen&#39;);
            }, 300);
        }
        document.querySelector(&#39;.more-options-menu&#39;)?.remove();
    };

    window.duplicateGoal = function() {
        // Show success feedback
        showToast(&#39;目标已复制&#39;, &#39;success&#39;);
        document.querySelector(&#39;.more-options-menu&#39;)?.remove();
    };

    window.archiveGoal = function() {
        // Show success feedback
        showToast(&#39;目标已归档&#39;, &#39;info&#39;);
        document.querySelector(&#39;.more-options-menu&#39;)?.remove();
    };

    // Simple toast notification
    function showToast(message, type = &#39;info&#39;) {
        const toast = document.createElement(&#39;div&#39;);
        toast.className = `alert alert-${type} fixed top-20 left-4 right-4 z-50 shadow-lg`;
        toast.innerHTML = `
            <span class="iconify" data-icon="heroicons:information-circle" data-width="20"></span>
            <span>${message}</span>
        `;
        
        document.body.appendChild(toast);
        
        // Animate in
        toast.style.transform = &#39;translateY(-100%)&#39;;
        toast.style.opacity = &#39;0&#39;;
        
        setTimeout(() => {
            toast.style.transform = &#39;translateY(0)&#39;;
            toast.style.opacity = &#39;1&#39;;
            toast.style.transition = &#39;all 0.3s ease&#39;;
        }, 100);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.style.transform = &#39;translateY(-100%)&#39;;
            toast.style.opacity = &#39;0&#39;;
            setTimeout(() => {
                toast.remove();
            }, 300);
        }, 3000);
    }

})();
</script>
  

<script>
    setTimeout(() => {
      Holder.run({
        domain: "placehold.co"
      })
    }, 100)
  </script></body></html>'></iframe>
                    </div>
                  </div>

                </body>
                </html>
            